  /**
   * 数量加一操作
   */
  function onPlus() {
      var plusEles = document.querySelectorAll('input[name="plus"]')
      for (var i = 0; i < plusEles.length; i++) {
          //加按钮绑定点击事件
          plusEles[i].onclick = function() {
              //1.数量加一
              //获取数量amount元素节点
              //this表示当前对象，在此处表示当前点击的加号
              var amountEle = this.previousElementSibling
              var num = amountEle.value //获取数量值
              num++ //加一
              amountEle.value = num //设置数量给元素节点

              //2.改变单个商品总价
              //2.1获取单个商品价格
              var priceEle = this.parentElement.previousElementSibling
              var price = priceEle.innerHTML
              price = price.substring(1)
                  //类型转换字符串->数值 string->number
                  // price = Number(price)
                  // console.log(typeof price)
                  //2.2 单价*数量=单个商品总价
              var totalPrice = price * num //隐式转换
                  // 2.3 赋值给单个商品总价
              var totalPriceEle = this.parentElement.nextElementSibling
              totalPriceEle.innerHTML = '￥' + totalPrice.toFixed(2)

              //3.恢复减号操作
              var minusBtn = this.previousElementSibling.previousElementSibling
              minusBtn.removeAttribute('disabled')

              //4.重新计算总价
              allTotalPrice()
          }
      }
  }
  /**
   * 数量减一
   */
  function onMinus() {
      //1. 获取所有减按钮
      var minusEles = document.querySelectorAll('input[name="minus"]')
          //2.遍历所有减按钮,绑定事件
      for (var i = 0; i < minusEles.length; i++) {
          minusEles[i].onclick = function() {
              //3. 获取数量amount元素节点
              //this表示当前对象，此处表示当前点击的减号元素节点
              var amountEle = this.nextElementSibling
              var num = amountEle.value
                  //4.边界处理 num不能小于0
              if (--num < 0) {
                  num = 0
                  this.setAttribute('disabled', true)
              }
              // 5. 将改变后的数量写回input输入框显示
              amountEle.value = num

              // 6. 单个商品总价改变
              // 6.1 单个商品价格
              var priceEle = this.parentElement.previousElementSibling
              var price = priceEle.innerHTML
              price = price.substring(1)
              console.log(price)
                  //6.2 单价*数量=单个商品总价
              var totalPrice = price * num //隐式转换
                  // 6.3 赋值给单个商品总价
              var totalPriceEle = this.parentElement.nextElementSibling
              totalPriceEle.innerHTML = '￥' + totalPrice.toFixed(2)

              //4.重新计算总价
              allTotalPrice()
          }
      }
  }

  /**
   * 计算所有商品总价
   *  思路:
   *    1. 遍历所有商品
   *    2. 获取单个商品总价格
   *    3. 累加求和
   */
  function allTotalPrice() {
      var singleprices = document.querySelectorAll('.singleprice')
      var sum = 0
      for (var i = 0; i < singleprices.length; i++) {
          var singlePrice = singleprices[i].innerHTML
          singlePrice = singlePrice.substring(1)
              // 类型转换
          singlePrice = Number(singlePrice)
          sum += singlePrice
      }

      var totalPriceEle = document.querySelector('#totalPrice')
          // totalPriceEle.innerHTML = '￥' + '${sum.toFixed(2)}';
  }



  function addTrels() {
      var bookName = document.querySelector('[name="bookname"]')
      var bookPrice = document.querySelector('[name="bookprice"]')
      var bookPicture = document.querySelector('[name="bookpicture"]')
      var tableObj = document.querySelector('table')
      var newTr = document.createElement('tr')
      var newTd = document.createElement('td')
      var newImg = document.createElement('img')
      newTd.appendChild(newImg)
      newImg.setAttribute('src', bookPicture.value)
      newImg.setAttribute('width', '57px')
      newImg.setAttribute('height', '74px')

      var newTd1 = document.createElement('td')

      newTd1.appendChild(document.createTextNode(bookName.value))

      var newTd2 = document.createElement('td')
      newTd2.appendChild(bookPrice.value)

      var inputObj1 = document.createElement('input')
      var inputObj2 = document.createElement('input')
      var inputObj3 = document.createElement('input')
      inputObj1.setAttribute('type', 'button')
      inputObj1.setAttribute('value', '-')
      inputObj1.setAttribute('name', 'minus')

      inputObj2.setAttribute('type', 'button')
      inputObj2.setAttribute('value', '0')
      inputObj2.setAttribute('name', 'amount')

      inputObj3.setAttribute('type', 'button')
      inputObj3.setAttribute('value', '+')
      inputObj3.setAttribute('name', 'plus')

      var newTd3 = document.createElement('td')
      newTd3.appendChild(inputObj1)
      newTd3.appendChild(inputObj2)
      newTd3.appendChild(inputObj3)

      var newTd4 = document.createElement('td')
      var newTd4Txt = document.createTextNode('￥0')
      newTd4.setAttribute('class', 'singleprice')
      newTd4.setAttribute('width', '100px')
      newTd4.appendChild(newTd4Txt)

      var newTd5 = document.createElement('td')
      var newA1 = document.createElement('a')
      var newA2 = document.createElement('a')
      var Atxt1 = document.createTextNode('移入收藏')
      var Atxt2 = document.createTextNode('删除')
      newA1.appendChild(Atxt1)
      newA2.appendChild(Atxt2)
      newTd5.appendChild(newA1)
      newTd5.appendChild(newA2)

      newTr.appendChild(newTd)
      newTr.appendChild(newTd1)
      newTr.appendChild(newTd2)
      newTr.appendChild(newTd3)
      newTr.appendChild(newTd4)
      newTr.appendChild(newTd5)

      tableObj.appendChild(newTr)
  }
  // addTrels()

  /**
   * 添加商品
   *   问题:表单提交时,会执行默认action动作,跳转到其它页面,如果没有指定其它页面，则会刷新当前页面
   *   解决: button按钮改变成普通按钮不会触发action动作,
   *       type="button"
   *
   */
  function addProduct() {
      var addBtn = document.querySelector('#addbookbtn')
      var tableEle = document.querySelector('table')

      // addBtn.onclick = function() {
      //     //0.获取表单内容
      //     var inputNameEle = document.querySelector('input[name="bookname"]')
      //     var inputPriceEle = document.querySelector('input[name="bookprice"]')
      //     var inputPictureEle = document.querySelector('input[name="bookpicture"]')
      //     var bookName = inputNameEle.value
      //     var bookPrice = inputPriceEle.value
      //     var bookPicture = inputPictureEle.value

      //     //1.创建商品项
      //     var trStr = `
      //     <td><img src="${bookPicture}" alt="book22" width="57" height="74"></td>
      //     <td>${bookName}</td>
      //     <td>￥${bookPrice}</td>
      //     <td><input type="button" name="minus" value="-"><input type="text" name="amount" value="0"><input type="button" name="plus" value="+"></td>
      //     <td class="singleprice" width="100px">￥0</td>
      //     <td><a href="#">移入收藏</a><br><a href="#" class="delete-btn">删除</a></td>
      // `
      //         //1.1创建tr商品项节点
      //     var trEle = document.createElement('tr')
      //         //1.2将strStr字符串作为内容赋值给tr节点
      //     trEle.innerHTML = trStr
      //         //2.添加商品项节点到table
      //     tableEle.appendChild(trEle)

      //     //3.清除表单内容
      //     inputNameEle.value = ''
      //     inputPriceEle.value = ''
      //     inputPictureEle.value = ''

      //     //4.给新增加的商品项重新绑定删除事件
      //     deleteProduct()
      //     onMinus()
      //     onPlus()
      // }
  }

  /**
   * 删除商品
   */
  function deleteProduct() {
      //1.获取所有删除按钮
      var deleteBtns = document.querySelectorAll('.delete-btn')
          //2.遍历所有删除按钮，绑定删除事件
      for (var i = 0; i < deleteBtns.length; i++) {
          deleteBtns[i].onclick = function() {
              this.parentElement.parentElement.remove()
          }
      }
  }

  onPlus()
  onMinus()
  allTotalPrice()
  addProduct()
  deleteProduct()